<template>
	<div class="firstDiv">
	<div class="container">
		<div>
			<PageTop></PageTop>
			<div class="navigation_bar ">
				<ul class="nav nav-tabs nav-justified">
					<li class="nav-item"><a class="nav-link" href="/#/home">首页</a></li>
					<li class="nav-item"><a class="nav-link" href="/#/mnzy">模拟填志愿</a></li>
					<li class="nav-item"><a class="nav-link" href="/#/schoolQuery">查学校</a></li>
					<li class="nav-item"><a class="nav-link  active" href="/#/major">查专业</a></li>
					<!-- <li class="nav-item"><a class="nav-link" href="/">智能选大学</a></li> -->
					<li class="nav-item"><a class="nav-link" href="/#/echarts">高考大数据</a></li>
					<li class="nav-item"><a class="nav-link" href="/#/chat">在线答疑</a></li>
				</ul>
			</div>
		</div>

		<div id="onepage">
			<div class="container" id="school_background">
				<div class="row">
					<div class="major_search col-12">

						<div class="input-group" style="width: 50%;margin-top: 20px;">
							<input type="text" class="form-control" v-model="majorInfo.majorName" placeholder="输入专业名称">
							<span class="input-group-btn">
								<button class="btn btn-default" v-on:click="searchName" type="button">
									<span style="color: white;">搜索</span>
								</button>
							</span>
						</div>

						<div class="major_class" style="margin-top: 20px;">
							<span style="font-size: 16px;font-weight: 500;">
								专业层次<i class="layui-icon" style="color: 	#B0C4DE;">&#xe602;</i>
							</span>
						</div>

						<el-tabs v-model="majorInfo.majorLevel" type="card" style="margin-top: 20px;"
							@tab-click="getMajorClass">
							<el-tab-pane label="本科" name="本科">
								<div class="major_class" style="margin-top: 20px;">
									<span style="font-size: 16px;font-weight: 500;">
										专业分类<i class="layui-icon" style="color: 	#B0C4DE;">&#xe602;</i>
									</span>
								</div>

								<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
									<ul class=" layui-tab-title">

										<li class="layui-this" @click="setNull">
											<el-link :underline="false">全部</el-link>
										</li>
										<li v-for="item in majorClasses" @click="returnMajorClass(item.majorClass)">
											<el-link :underline="false">{{item.majorClass}}</el-link>
										</li>

									</ul>
									<div class="layui-tab-content">
										<div class="layui-tab-item layui-show">
											<div class="row">
												<div class="show-left col-lg-8 col-md-12 col-sm-12">
													<el-card>
													<!-- 如果majorInfo有值的话就显示，没有值的话显示暂无数据 -->
													<div id="showMajor" v-if="majorInfos.length != 0">
														<div class="major_show" v-for="major in majorInfos"
															@click="goToMajorInfo(major.dataId)">
															<div class="son_list">
																<div class="col-9">
																	<el-link type="success" href="" :underline="false"
																		target="_blank">
																		{{major.majorName}}
																	</el-link>
																	<span id="majorSection">{{major.majorSection}}</span>
																	<div class="son_tags">
																		<span
																			id="majorAttribute">专业代码：{{major.majorId}}</span>
																		<span
																			id="majorAttribute">修业年限：{{major.lengthOfStudy}}</span>
																		<span
																			id="majorAttribute">授予学位：{{major.diploma}}</span>

																		<span
																			id="sexRatio">男女比例：{{returnInt(major.boyRadio)}}:{{returnInt(major.girlRadio)}}</span>
																	</div>
																</div>

																<div class="set_school col-3">查看</div>
															</div>
														</div>
														<!-- 分页 -->
														<div id="page_content">
															<el-pagination background layout="prev, pager, next"
																:total="pageTotal" :page-size="pageSize"
																@current-change="page">
															</el-pagination>
														</div>
													</div>
													<div id="showEmpty" v-else>
														<el-empty description="暂无数据"></el-empty>
													</div>
												</el-card>
												</div>

												<div class="show-right col-4 d-none d-lg-block">
													<MajorRecommend></MajorRecommend>
												</div>
											</div>

										</div>

										<div class="layui-tab-item" v-for="major in majorClasses">
											<div class="row">
												<div class="show-left col-lg-8 col-md-12 col-sm-12">
													<el-card>
													<div id="showMajor" v-if="majorInfos.length != 0">
														<span
															style="font-size: 28px; font-weight: 530;">{{major.majorClass}}</span>
														<el-select v-model="majorSection" placeholder="请选择"
															style="margin-left: 20px;" @change="getValue">
															<el-option v-for="item in majorSections" :label="item.majorSection"
																:value="item.majorSection">
															</el-option>
														</el-select>
														<div class="major_show" v-for="major in majorInfos"
															@click="goToMajorInfo(major.dataId)">
															<div class="son_list">
																<div class="col-9">
																	<el-link type="success" href="" :underline="false"
																		target="_blank">
																		{{major.majorName}}
																	</el-link>

																	<div class="son_tags">
																		<span id="majorAttribute">专业代码：{{major.majorId}}</span>
																		<span
																			id="majorAttribute">修业年限：{{major.lengthOfStudy}}</span>
																		<span id="majorAttribute">授予学位：{{major.diploma}}</span>

																		<span
																			id="sexRatio">男女比例：{{returnInt(major.boyRadio)}}:{{returnInt(major.girlRadio)}}</span>
																	</div>
																</div>

																<div class="set_school col-3">查看</div>
															</div>
														</div>
														<!-- 分页 -->
														<div id="page_content">
															<el-pagination background layout="prev, pager, next"
																:total="pageTotal" :page-size="pageSize" @current-change="page">
															</el-pagination>
														</div>

													</div>
													<div id="showEmpty" v-else>
														<el-empty description="暂无数据"></el-empty>
													</div>
													</el-card>
												</div>

												<div class="show-right col-4 d-none d-lg-block">
													<MajorRecommend></MajorRecommend>
												</div>
											</div>


										</div>
									</div>

								</div>
							</el-tab-pane>
							<el-tab-pane label="专科" name="专科">
								<div class="major_class" style="margin-top: 20px;">

									<span style="font-size: 16px;font-weight: 500;">
										专业分类<i class="layui-icon" style="color: 	#B0C4DE;">&#xe602;</i>
									</span>

									<!-- 专科大类 -->
									<el-select v-model="majorClass" placeholder="请选择" style="margin-left: 20px;"
										@change="returnMajorClass">
										<el-option v-for="item in majorClasses" :label="item.majorClass"
											:value="item.majorClass">
										</el-option>
									</el-select>
									<!-- 专科小类 -->
									<el-select v-model="majorSection" placeholder="请选择" style="margin-left: 20px;"
										@change="getValue">
										<el-option v-for="item in majorSections" :label="item.majorSection"
											:value="item.majorSection">
										</el-option>
									</el-select>

									<div class="row" style="margin-top: 20px;">

										<div class="show-left col-lg-8 col-md-12 col-sm-12">
											<el-card >
											<!-- 判断majorInfos是否为空 -->
											<div id="showMajor" v-if="majorInfos.length != 0">
												<div class="major_show" v-for="major in majorInfos"
													@click="goToMajorInfo(major.dataId)">
													<div class="son_list">
														<div class="col-9">
															<el-link type="success" href="" :underline="false" target="_blank">
																{{major.majorName}}
															</el-link>
															<span id="majorSection">{{major.majorSection}}</span>
															<div class="son_tags">
																<span id="majorAttribute">专业代码：{{major.majorId}}</span>
																<span id="majorAttribute">修业年限：{{major.lengthOfStudy}}</span>
																<span id="majorAttribute">授予学位：{{major.diploma}}</span>

																<span
																	id="sexRatio">男女比例：{{returnInt(major.boyRadio)}}:{{returnInt(major.girlRadio)}}</span>
															</div>
														</div>

														<div class="set_school col-3">查看</div>

													</div>
												</div>
												<!-- 分页 -->
												<div id="page_content">
													<el-pagination background layout="prev, pager, next" :total="pageTotal"
														:page-size="pageSize" @current-change="page">
													</el-pagination>
												</div>
											</div>
											<div id="showEmpty" v-else>
												<el-empty description="暂无数据"></el-empty>
											</div>
											</el-card>
										</div>

									</div>


								</div>
							</el-tab-pane>

						</el-tabs>

					</div>
				</div>
			</div>
		</div>
		<div class="bottom">
			<PageBottom></PageBottom>
		</div>
	</div>
	</div>
</template>

<script>
	import PageTop from '../components/basic/PageTop.vue'
	import PageBottom from '../components/basic/PageBottom.vue'
	import MajorRecommend from './majorInfo/majorRecommend.vue'

	export default {
		name: 'major',
		data() {
			return {
				majorInfo: {
					majorSection: '',
					majorClass: '',
					majorName: '',
					majorLevel: '本科'
				},
				pageNum: 1,
				pageSize: 15,
				pageTotal: 0,
				majorInfos: [],
				majorSection: '', // 专业小类别,用来获取前端选择的专业小类别，传到后台
				majorSections: [], // 从后台返回的某个大类别的所有小类别
				// majorClasses: ['文学', '理学', '工学', '教育学', '经济学', '法学', '农学', '历史学', '哲学', '管理学', '医学', '艺术学'],
				majorClasses: [],
				majorClass: '', // 专业大类别
			}
		},
		methods: {
			// 向majorInfo界面传id
			goToMajorInfo(id) {
				console.log(id);
				const {
					href
				} = this.$router.resolve({
					path: `/majorInfo`,
					query: {
						dataId: id,
					}
				});
				window.open(href, '_blank');
			},

			// 根据名字查询
			searchName() {
				this.getMajor();
			},

			// 当选择框选择专业小类时，获取到这个专业小类，然后调用getMajor函数获取所有专业
			getValue() {
				this.majorInfo.majorSection = this.majorSection;
				this.getMajor();
			},
			// 点击全部需要把小类变成空值
			setNull() {
				this.majorClass = '';
				this.majorInfo.majorClass = '';
				this.majorSection = ''; // 点击选项卡之后，选择框要恢复默认值
				this.majorInfo.majorSection = '';
				this.getMajor();
			},

			getMajorClass() {
				// if(this.majorInfo.majorLevel == "本科"){
				// 	this.majorClasses = ['文学', '理学', '工学', '教育学', '经济学', '法学', '农学', '历史学', '哲学', '管理学', '医学', '艺术学'];
				// }else if(this.majorInfo.majorLevel == "专科"){
				// 	this.majorClasses = ['农林','渔业'];
				// }
				// console.log(this.majorClasses);

				var param = this.$qs.stringify(this.majorInfo);
				this.$axios.post("/major/searchByMajorLevel", param)
					.then(rst => {
						// console.log(rst.data);
						this.majorClasses = rst.data;

					}).catch(ex => {
						console.log(ex);
					});
				this.setNull();
				this.getMajor();
			},
			// 获取大类的名字
			returnMajorClass(classx) {
				this.majorClass = classx;
				this.majorInfo.majorClass = classx;
				this.majorSection = ''; // 点击选项卡之后，选择框要恢复默认值
				this.majorInfo.majorSection = '';
				// this.majorInfos = [];
				this.getSection();
				this.getMajor();
				// console.log(this.majorClass);
			},
			// 向后台传递大类名字，获取该大类的所有小类
			getSection() {

				var param = this.$qs.stringify({
					className: this.majorClass
				});
				// console.log(param);
				this.$axios.post("/major/searchByClassName", param)
					.then(rst => {
						this.majorSections = rst.data;
					}).catch(ex => {
						console.log(ex);
					});
			},
			// 向后台传递小类名字，获取该小类的所有专业
			getMajor() {
				this.majorInfo.pageNum = this.pageNum;
				this.majorInfo.pageSize = this.pageSize;
				// console.log(this.majorInfo);
				var param = this.$qs.stringify(this.majorInfo);
				this.$axios.post("/major/search", param)
					.then(rst => {
						// console.log(rst.data.list);
						this.majorInfos = rst.data.list;
						this.pageTotal = rst.data.total;

					}).catch(ex => {
						console.log(ex);
					});
			},
			page(curr) {
				// console.log(curr);
				this.pageNum = curr;
				this.getMajor();
			},
			// 男女比例数值只保留两位有效数字
			returnInt(a) {
				return (Math.floor(a * 100)).toFixed(0);
			}

		},
		created() {
			this.getValue();
			this.getMajorClass();
		},
		components: {
			PageTop,
			PageBottom,
			MajorRecommend
		},
		mounted() {
			layui.use('element', function() {
				var element = layui.element;

			});
		}
	}
</script>

<style scoped>
	.firstDiv{
		background-image: url(../assets/backimg5.png);
	}
	.navigation_bar {
		margin-top: 20px;
	}


	.navigation_bar ul.nav>li>a {
		color: #000000;
		font-size: 17px;
		font-weight: 560;
	}

	.input-group-btn .btn {
		background-color: #1eb450;

	}

	.search {
		margin-top: -10px;
	}



	.onepage {
		margin-top: 20px;
	}


	.input-group {
		margin-top: 10px;
	}


	.layui-card {
		margin-top: 20px;
	}

	.layui-card-header {
		font-size: 18px;
		font-weight: 550;
		color: #5FB878;
	}

	.son_list {
		padding: 15px 0;
		border-bottom: 1px dashed #00BEA2;
		position: relative;
	}

	.son_list .el-link {
		font-size: 16px;
		color: #5FB878;
		margin-bottom: 10px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.4s;
	}

	.son_title {
		font-size: 16px;
		color: #000000;
		margin-bottom: 10px;
		margin-top: 10px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.4s;
	}

	.son_list #majorSection {
		font-size: 14px;
		font-family: 楷体;
		margin-bottom: -10px;
		color: #1EB450;
		/* display: inline-block; */
		padding-left: 13px;
		position: relative;
		margin-left: 13px;
		/* line-height: 15px; */
	}

	.son_tags {
		cursor: pointer;
	}

	.son_list .son_tags #majorAttribute {
		font-size: 14px;
		color: #555555;
		display: inline-block;
		padding-right: 13px;
		position: relative;
		margin-right: 13px;
		border-right: 1px solid #555555;
		line-height: 15px;
	}

	.son_list .son_tags #sexRatio {
		font-size: 14px;
		color: #555555;
		display: inline-block;
		padding-right: 13px;
		position: relative;
		margin-right: 13px;
		line-height: 15px;
	}

	.son_list .set_school {
		margin-left: 20px;
		width: 74px;
		height: 32px;
		background: #5FB878;
		border-radius: 4px;
		text-align: center;
		line-height: 32px;
		font-size: 14px;
		color: #FFFFFF;
		position: absolute;
		right: 0;
		top: 50%;
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		cursor: pointer;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-pack: center;
		justify-content: center;
		-ms-flex-align: center;
		align-items: center;
	}

	#school_background {
		margin-top: 20px;
		/* background-image: url(../assets/backimg5.png); */
		border-radius: 30px;
		/* background-color: #E6F1FE; */
	}
	.show-left .el-card{
		border-radius: 20px;
	}
</style>
